<template>
	<article class="kp-modifyPass">
    <div class="kp-td-header">
      <em @click="tdclose"></em>
      <span>实名认证</span>
      <small @click="save">保存</small>
    </div>
		<div class="kp-mp-box">
			<div class="kp-card-box">
				请填写真实信息，通过后将无法修改！<span style="color: #fb6523;">请确保注册手机号、姓名、身份证为同一人</span>
			</div>
			<div class="kp-mb-li">
				<input type="text" placeholder="请输入真实姓名" v-model="nickName" @input="nickFocus" />
				<i v-show="is_false" @click.stop="reset"></i>
			</div>
			<div class="kp-mb-li mt-30">
				<input type="text" placeholder="请输入身份证号" v-model="iccard" @input="iconFocus" />
				<i v-show="is_iccard" @click.stop="iconreset"></i>
			</div>
			<!--<p><span> 注： 请输入正确的身份证号码！</span></p>-->
		</div>
	</article>
</template>

<script>
	import { XInput, Group, XButton } from 'vux';
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				nickName: '',
				is_false: false,
				iccard: '',
				is_iccard: false,
			}
		},
		mounted() { //载入后执行
		},
		created() { //创建后

		},
		watch: { //监听放置
		},
		methods: { //方法放置
      tdclose(){
        this.$router.go(-1)
      },
			reset() {
				this.nickName = '';
				this.is_false = false;
			},
			nickFocus() {
				this.is_false = true;
			},
			iconFocus() {
				this.is_iccard = true;
			},
			iconreset() {
				this.iccard = '';
				this.is_iccard = false;
			},
			save() {
				if (this.nickName=="") {
					this.$toast('姓名不能为空')
					return false;
				}else if(this.iccard==""){
					this.$toast('身份证号不能为空')
				  return false;
				}else{
					//实名认证
					let param = {
						userID: this.userinfo.userID,
						userName: this.nickName,
						IDNo:this.iccard,
						type: "2"
					};
					let that = this;
					this.$http.post(this.$baseUrl.scenicurl + "kpcx/appPersonalCenter/updateInfo", param).then((res) => {
						console.log(res);
						if(res.data.Code == 0) {
							var userinfo = res.data.Result.appuser;
							if(res.data.Result.appuser) {
								that.$store.commit('USERINFO', userinfo);
								if(res.data.Result.appuser.IDNo) {
									userinfo.realnamestatus = true;
									that.$store.commit('USERINFO', userinfo);
								} else {
									userinfo.realnamestatus = false;
									that.$store.commit('USERINFO', userinfo);
								}
								that.$router.go(-1);
							} else {
								that.$toast('用户信息不存在');
							}
						} else {
							that.$toast(res.data.msg);
						}

					}).catch((err) => {

					})
				}

			}
		},
		components: {
			XInput,
			Group,
			XButton
		},
		computed: mapGetters([
			'userinfo',
		]),
	}
</script>

<style scoped>
	/* //头像部分 */
  .kp-td-header{
    background: #fff;
    position: relative;
  }
  .kp-td-header em{
  	width: 25px;
  	height: 44px;
  	background: url(../../assets/left-2.png) no-repeat center center;
  	background-size:25px 44px;
  	top: 25px;
    position: absolute;
  	left: 30px;
  }
  .kp-td-header small{
  	width: 100px;
  	height: 44px;
    font-size: 28px;
    line-height: 44px;
  	top: 25px;
    text-align: center;
    position: absolute;
    color: rgb(59,195,194);
  	right: 30px;
  }
  .kp-td-header span{
    display: block;
    margin: 0 100px;
    text-align: center;
    font-size: 34px;
    height: 86px;
    line-height: 86px;
    overflow: hidden;
    text-align: center;
    font-weight: 400;
    color: rgb(51,51,51);
  }
	.kp-modifyPass {
		background: #f4f5f9;
	}

	.kp-mb-li {
		height: 98px;
		margin-top: 32px;
		display: flex;
		padding: 0 30px;
		background: #fff;
		position: relative;
	}

	.kp-mb-li input {
		flex: 1;
		border: none;
		font-size: 32px;
		color: rgb(51, 51, 51);
		background: #FFF;
		outline: none;
		margin-right: 30px;
	}

	.kp-mb-li input::-ms-input-placeholder {
		color: rgb(203, 203, 203);
	}

	.kp-mb-li i {
		position: absolute;
		width: 98px;
		height: 98px;
		right: 30px;
		background: url(../../assets/reset.png) no-repeat right center;
		background-size: 32px 32px;
		display: inline-block;
		z-index: 9;
	}

	input::-webkit-input-placeholder {
		color: rgb(203, 203, 203);
	}

	input::-moz-placeholder {
		color: rgb(203, 203, 203);
	}

	.kp-mp-box p {
		text-align: right;
		padding: 17px 30px 0;
		font-size: 28px;
		color: rgb(138, 138, 138);
	}

	.kp-mp-box p span {
		font-size: 26px;
		color: rgb(245, 31, 31);
		float: left;
	}

	.kp-card-box {
		font-size: 28px;
		padding: 30px 0 0 26px;
		color: rgb(183, 183, 183);
		line-height: 1.3;
	}
</style>
